<script setup>
import { ref, reactive, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import Chart from "@/components/Chart/index.vue";
import AppHeader from "@/components/app_header.vue";
import {
  getUserCurveDataApi,
  getUserPledgeDataApi,
  getUserPowerDataApi,
  getUserNftDataApi,
  getPlatformDailyDataApi,
  getPlatformNftDataApi,
  getPlatformDestroyDataApi,
  getPlatformDynamicDataApi
} from "@/api/public";
import { useConfigStore } from "@/store/modules/config";
import { fromWeiToFloat } from "@/utils";

import { data } from "autoprefixer";

const useConfig = useConfigStore();

const { locale, t } = useI18n();
const isShow = ref(false);
const loading = ref(false);
const finished = ref(false);
const list = reactive([]);
const tabs = reactive([t("panel.personal"), t("panel.platfrom")]);
const router = useRouter();
const ToBlack = () => {
  router.push("home");
};

/// ======================bigv

// 个人 持币
const userCurveHoldProfit = reactive({
  before_profit: 0,
  total_profit: 0,
  list: []
});
const getUserCurveHoldProfit = async () => {
  const params = {
    address: useConfig.account,
    module_code: "HOLD_PROFIT",
    page: 0,
    size: 50
  };
  const { before_profit, total_profit, list } =
    await getUserCurveDataApi(params);
  const before_profitWei = useConfig.web3.utils.fromWei(before_profit, "ether");
  userCurveHoldProfit.before_profit = parseFloat(
    parseFloat(before_profitWei).toFixed(4)
  );

  const total_profitWei = useConfig.web3.utils.fromWei(total_profit, "ether");
  userCurveHoldProfit.total_profit = parseFloat(
    parseFloat(total_profitWei).toFixed(4)
  );

  userCurveHoldProfit.list = list.map(v => {
    const balance_changeWei = useConfig.web3.utils.fromWei(
      v.balance_change,
      "ether"
    );
    v.balance_change = parseFloat(parseFloat(balance_changeWei).toFixed(4));
    return {
      time: v.date,
      vol: v.balance_change
    };
  });

  console.log("个人收益曲线数据 持币");
  console.log(userCurveHoldProfit, "个人收益曲线数据 持币");
};

// 个人 推广
const userCurveExtensionProfit = reactive({
  before_profit: 0,
  total_profit: 0,
  list: []
});
const getUserCurveExtensionProfit = async () => {
  const params = {
    address: useConfig.account,
    module_code: "EXTENSION_PROFIT",
    page: 0,
    size: 50
  };
  const { before_profit, total_profit, list } =
    await getUserCurveDataApi(params);
  const before_profitWei = useConfig.web3.utils.fromWei(before_profit, "ether");
  userCurveExtensionProfit.before_profit = parseFloat(
    parseFloat(before_profitWei).toFixed(4)
  );

  const total_profitWei = useConfig.web3.utils.fromWei(total_profit, "ether");
  userCurveExtensionProfit.total_profit = parseFloat(
    parseFloat(total_profitWei).toFixed(4)
  );

  userCurveExtensionProfit.list = list.map(v => {
    const balance_changeWei = useConfig.web3.utils.fromWei(
      v.balance_change,
      "ether"
    );
    v.balance_change = parseFloat(parseFloat(balance_changeWei).toFixed(4));
    return {
      time: v.date,
      vol: v.balance_change
    };
  });
  console.log("个人收益曲线数据 推广");
  console.log(userCurveExtensionProfit, "个人收益曲线数据 推广");
};

// 个人 NFT
const userCurveNftProfit = reactive({
  before_profit: 0,
  total_profit: 0,
  list: []
});
const getUserCurveNftProfit = async () => {
  const params = {
    address: useConfig.account,
    module_code: "NFT_PROFIT",
    page: 0,
    size: 50
  };
  const { before_profit, total_profit, list } =
    await getUserCurveDataApi(params);
  const before_profitWei = useConfig.web3.utils.fromWei(before_profit, "ether");
  userCurveNftProfit.before_profit = parseFloat(
    parseFloat(before_profitWei).toFixed(4)
  );

  const total_profitWei = useConfig.web3.utils.fromWei(total_profit, "ether");
  userCurveNftProfit.total_profit = parseFloat(
    parseFloat(total_profitWei).toFixed(4)
  );

  userCurveNftProfit.list = list.map(v => {
    const balance_changeWei = useConfig.web3.utils.fromWei(
      v.balance_change,
      "ether"
    );
    v.balance_change = parseFloat(parseFloat(balance_changeWei).toFixed(4));
    // return v
    return {
      time: v.date,
      vol: v.balance_change
    };
  });
  console.log("个人收益曲线数据 NFT");
  console.log(userCurveNftProfit, "个人收益曲线数据 NFT");
};

// 个人 DYNAMIC_PROFIT DynamicProfit
const userCurveDynamicProfit = reactive({
  before_profit: 0,
  total_profit: 0,
  list: []
});
const getUserCurveDynamicProfit = async () => {
  const params = {
    address: useConfig.account,
    module_code: "DYNAMIC_PROFIT",
    page: 0,
    size: 50
  };
  const { before_profit, total_profit, list } =
    await getUserCurveDataApi(params);
  userCurveDynamicProfit.before_profit = fromWeiToFloat(before_profit);
  userCurveDynamicProfit.total_profit = fromWeiToFloat(total_profit);
  userCurveDynamicProfit.list = list.map(v => {
    return {
      time: v.date,
      vol: fromWeiToFloat(v.balance_change)
    };
  });
  console.log("个人收益曲线数据 动态");
  console.log(userCurveDynamicProfit, "个人收益曲线数据 动态");
};

// 个人 质押
const userPledgeData = reactive({
  before_pledge: 0,
  total_pledge: 0,
  list: []
});
const getUserPledgeData = async () => {
  const params = {
    address: useConfig.account,
    page: 0,
    size: 50
  };
  const { before_pledge, total_pledge, list } =
    await getUserPledgeDataApi(params);
  const before_pledgeWei = useConfig.web3.utils.fromWei(before_pledge, "ether");
  userPledgeData.before_pledge = parseFloat(
    parseFloat(before_pledgeWei).toFixed(4)
  );

  const total_pledgeWei = useConfig.web3.utils.fromWei(total_pledge, "ether");
  userPledgeData.total_pledge = parseFloat(
    parseFloat(total_pledgeWei).toFixed(4)
  );

  userPledgeData.list = list.map(v => {
    const pledgeWei = useConfig.web3.utils.fromWei(v.pledge, "ether");
    v.pledge = parseFloat(parseFloat(pledgeWei).toFixed(4));
    // return v;
    return {
      time: v.created_at,
      vol: v.pledge
    };
  });
  console.log("个人 质押");
  console.log(userPledgeData);
};

// 个人 算力
const userPowerData = reactive({
  before_power: 0,
  total_power: 0,
  list: []
});
const getUserPowerData = async () => {
  const params = {
    address: useConfig.account,
    page: 0,
    size: 50
  };
  const { before_power, total_power, list } = await getUserPowerDataApi(params);
  // const before_powerWei = useConfig.web3.utils.fromWei(before_power, "ether");
  userPowerData.before_power = parseFloat(parseFloat(before_power).toFixed(4));

  // const total_powerWei = useConfig.web3.utils.fromWei(total_power, "ether");
  userPowerData.total_power = parseFloat(parseFloat(total_power).toFixed(4));

  userPowerData.list = list.map(v => {
    // const powerWei = useConfig.web3.utils.fromWei(v.power, "ether");
    v.power = parseFloat(parseFloat(v.power).toFixed(4));
    return {
      time: v.created_at,
      vol: v.power
    };
  });
  console.log("个人 算力");
  console.log(userPowerData);
};

// 个人 NFT数据
const userNftData = reactive({
  before: 0,
  now: 0,
  list: []
});
const getUserNftData = async () => {
  const params = {
    address: useConfig.account,
    page: 0,
    size: 50
  };
  const { before, now, list } = await getUserNftDataApi(params);
  // const beforeWei = useConfig.web3.utils.fromWei(before, "ether");
  userNftData.before = parseFloat(parseFloat(before).toFixed(4));

  // const nowWei = useConfig.web3.utils.fromWei(now, "ether");
  userNftData.now = parseFloat(parseFloat(now).toFixed(4));

  userNftData.list = list.map(v => {
    // const numWei = useConfig.web3.utils.fromWei(v.num, "ether");
    v.num = parseFloat(parseFloat(v.num).toFixed(4));
    return {
      time: v.created_at,
      vol: v.num
    };
  });
  console.log("个人 NFT数据");
  console.log(userNftData);
};

// 平台发放曲线数据
const platformDailyData = reactive({
  total_output: 0,
  before_output: 0,
  hold_profit: 0,
  extension_profit: 0,
  list: []
});
const getPlatformDailyData = async () => {
  const params = {
    address: useConfig.account,
    module_code: "EXTENSION_PROFIT",
    page: 0,
    size: 50
  };
  const res = await getPlatformDailyDataApi(params);

  res.list = res.list.map(v => {
    const wei = useConfig.web3.utils.fromWei(v.output_number, "ether");
    v.output_number = parseFloat(parseFloat(wei).toFixed(4));
    return {
      time: v.created_at,
      vol: v.output_number
    };
  });

  Object.assign(platformDailyData, res);
  console.log("平台发放曲线数据");
  console.log(platformDailyData);
};

// 平台 NFT
const platformNftData = reactive({
  NFT_total_profit: 0,
  NFT_before_profit: 0,
  NFT_total_num: 0,
  NFT_profit_ratio: 0,
  list: []
});
const getPlatformNftData = async () => {
  const params = {
    address: useConfig.account,
    module_code: "EXTENSION_PROFIT",
    page: 0,
    size: 50
  };
  const res = await getPlatformNftDataApi(params);
  // const wei = useConfig.web3.utils.fromWei(res.NFT_total_profit, "ether");
  // res.NFT_total_profit = parseFloat(
  //   parseFloat(res.NFT_total_profit).toFixed(4)
  // );
  // res.NFT_before_profit = parseFloat(
  //   parseFloat(res.NFT_before_profit).toFixed(4)
  // );

  Object.assign(platformNftData, res);
  platformNftData.list = res.list.map(v => {
    const wei = useConfig.web3.utils.fromWei(v.balance_change, "ether");
    v.balance_change = parseFloat(parseFloat(wei).toFixed(4));
    return {
      time: v.date,
      vol: v.balance_change
    };
  });

  // Object.assign(platformNftData, res);
  console.log("平台 NFT");
  console.log(platformNftData);
};

// 平台 销毁
const platformDestroyData = reactive({
  before_num: 0,
  destroy_total_num: 0,
  list: []
});
const getPlatformDestroyData = async () => {
  const params = {
    address: useConfig.account,
    module_code: "EXTENSION_PROFIT",
    page: 0,
    size: 50
  };
  const { before_num, destroy_total_num, list } =
    await getPlatformDestroyDataApi(params);

  const before_numWie = useConfig.web3.utils.fromWei(before_num, "ether");
  platformDestroyData.before_num = parseFloat(
    parseFloat(before_numWie).toFixed(4)
  );

  const destroy_total_numWei = useConfig.web3.utils.fromWei(
    destroy_total_num,
    "ether"
  );
  platformDestroyData.destroy_total_num = parseFloat(
    parseFloat(destroy_total_numWei).toFixed(4)
  );

  platformDestroyData.list = list.map(v => {
    const wei = useConfig.web3.utils.fromWei(v.destroy_num, "ether");
    v.destroy_num = parseFloat(parseFloat(wei).toFixed(4));
    return {
      time: v.created_at,
      vol: v.destroy_num
    };
    // return v;
  });

  console.log("平台 销毁");
  console.log(platformDestroyData);
};

// 平台 动态数据
const platformDynamicData = reactive({
  dynamic_total_profit: 0,
  dynamic_before_profit: 0,
  list: []
});
const getPlatformDynamicData = async () => {
  const params = {
    page: 0,
    size: 50
  };
  const { dynamic_total_profit, dynamic_before_profit, list } =
    await getPlatformDynamicDataApi(params);

  platformDynamicData.dynamic_total_profit =
    fromWeiToFloat(dynamic_total_profit);
  platformDynamicData.dynamic_before_profit = fromWeiToFloat(
    dynamic_before_profit
  );

  platformDynamicData.list = list.map(v => {
    return {
      time: v.date,
      vol: fromWeiToFloat(v.balance_change)
    };
  });

  console.log("平台 动态数据");
  console.log(platformDynamicData);
};

onMounted(() => {
  getUserCurveHoldProfit();
  getUserCurveExtensionProfit();
  getUserCurveNftProfit();
  getUserCurveDynamicProfit();
  getUserPledgeData();
  getUserPowerData();
  getUserNftData();
  /// 个人 平台分界线
  getPlatformDailyData();
  getPlatformNftData();
  getPlatformDestroyData();
  getPlatformDynamicData();
});
</script>

<template>
  <div class="home div-container">
    <!-- header--start-->
    <div class="div-header">
      <div class="div-left" @click.stop="ToBlack">
        <img src="@/assets/icon-black.png" alt="" />
      </div>
      <span class="title">
        <img src="@/assets/icon-logo.png" width="40" alt="" />
      </span>
      <div class="div-right">...</div>
    </div>
    <!-- header--start-->
    <!-- div-wallet--start-->
    <AppHeader />
    <!--    <div class="div-wallet">-->
    <!--      <div class="wallet" @click.stop="showDialog">-->
    <!--        <img src="@/assets/icon-wallet.png" width="32" height="32" alt="">-->
    <!--        0x02****27078d9d-->
    <!--      </div>-->
    <!--      <div class="div-change" @click="changeLang">-->
    <!--        <img src="@/assets/icon-change.png" width="19" height="19" alt="">-->
    <!--        {{$t('home.ch')}}-->
    <!--      </div>-->
    <!--    </div>-->

    <div class="div-record">
      <van-tabs>
        <van-tab v-for="(name, index) in tabs" :key="index" :title="name">
          <!--  个人--start        -->
          <div v-show="index === 0" class="div-list">
            <div class="div-board">
              <div class="border-orange">
                <!-- 累计持币收益-->
                <p>{{ $t("panel.accumulateIncome") }}</p>
                <p>{{ userCurveHoldProfit.total_profit }}</p>
              </div>
              <div class="border-green">
                <!-- 昨日持币收益-->
                <p>{{ $t("panel.accumulateIncomed") }}</p>
                <p>{{ userCurveHoldProfit.before_profit }}</p>
              </div>
            </div>

            <div v-show="userCurveHoldProfit.list.length > 1" class="div-chart">
              <Chart :data="userCurveHoldProfit.list" />
            </div>

            <div class="div-board">
              <div class="border-orange">
                <!-- 累计推广收益-->
                <p>{{ $t("panel.accumulateIncomeTotal") }}</p>
                <p>{{ userCurveExtensionProfit.total_profit }}</p>
              </div>
              <div class="border-green">
                <!-- 昨日推广收益-->
                <p>{{ $t("panel.accumulateIncomeShare") }}</p>
                <p>{{ userCurveExtensionProfit.before_profit }}</p>
              </div>
            </div>

            <div
              v-show="userCurveExtensionProfit.list.length > 1"
              class="div-chart"
            >
              <Chart :data="userCurveExtensionProfit.list" />
            </div>

            <div class="div-board">
              <div class="border-orange">
                <!--   <p>累计NFT收益</p>-->
                <p>{{ $t("panel.subDesc1") }}</p>
                <p>{{ userCurveNftProfit.total_profit }}</p>
              </div>
              <div class="border-green">
                <!--   <p>昨日NFT收益</p>-->
                <p>{{ $t("panel.subDesc2") }}</p>
                <p>{{ userCurveNftProfit.before_profit }}</p>
              </div>
            </div>

            <div v-show="userCurveNftProfit.list.length > 1" class="div-chart">
              <Chart :data="userCurveNftProfit.list" />
            </div>

            <!--    个人        add ---start-->
            <div class="div-board">
              <div class="border-orange">
                <!--   <p>累计动态分红</p>-->
                <p>{{ $t("panel.subDesc20") }}</p>
                <p>{{ userCurveDynamicProfit.total_profit }}</p>
              </div>
              <div class="border-green">
                <!--   <p>昨日动态分红</p>-->
                <p>{{ $t("panel.subDesc21") }}</p>
                <p>{{ userCurveDynamicProfit.before_profit }}</p>
              </div>
            </div>
            <div
              v-show="userCurveDynamicProfit.list.length > 1"
              class="div-chart"
            >
              <Chart :data="userCurveDynamicProfit.list" />
            </div>
            <!--            add ---end-->

            <div class="div-board">
              <div class="border-purple">
                <!--   <p>总质押</p>-->
                <p>{{ $t("panel.subDesc3") }}</p>
                <p>{{ userPledgeData.total_pledge }}</p>
              </div>
              <div class="border-pink">
                <!--                <p>昨日质押</p>-->
                <p>{{ $t("panel.subDesc4") }}</p>
                <p>{{ userPledgeData.before_pledge }}</p>
              </div>
            </div>

            <div v-show="userPledgeData.list.length > 1" class="div-chart">
              <Chart :data="userPledgeData.list" />
            </div>

            <div class="div-board">
              <div class="border-orange">
                <!--                <p>当前算力</p>-->
                <p>{{ $t("panel.subDesc5") }}</p>
                <p>{{ userPowerData.total_power }}</p>
              </div>
              <div class="border-green">
                <!--                <p>昨日算力</p>-->
                <p>{{ $t("panel.subDesc6") }}</p>
                <p>{{ userPowerData.before_power }}</p>
              </div>
            </div>

            <div v-show="userPowerData.list.length > 1" class="div-chart">
              <Chart :data="userPowerData.list" />
            </div>

            <div class="div-board">
              <div class="border-purple">
                <!--                <p>当前NFT数量</p>-->
                <p>{{ $t("panel.subDesc7") }}</p>
                <p>{{ userNftData.now }}</p>
              </div>
              <div class="border-pink">
                <!--                <p>昨日NFT数量</p>-->
                <p>{{ $t("panel.subDesc8") }}</p>
                <p>{{ userNftData.before }}</p>
              </div>
            </div>

            <div v-show="userNftData.list.length > 1" class="div-chart">
              <Chart :data="userNftData.list" />
            </div>
          </div>
          <!--  个人--end        -->
          <!--  团队--start        -->
          <div v-show="index === 1" class="div-list">
            <div class="div-board">
              <div class="border-orange">
                <!--                <p>累计产生</p>-->
                <p>{{ $t("panel.subDesc9") }}</p>
                <p>{{ fromWeiToFloat(platformDailyData.total_output) }}</p>
              </div>
              <div class="border-green">
                <!--                <p>昨日产生</p>-->
                <p>{{ $t("panel.subDesc10") }}</p>
                <p>{{ fromWeiToFloat(platformDailyData.before_output) }}</p>
              </div>
              <div class="border-pink">
                <!--                <p>持币分红</p>-->
                <p>{{ $t("panel.subDesc11") }}</p>
                <p>{{ fromWeiToFloat(platformDailyData.hold_profit) }}</p>
              </div>
              <div class="border-purple">
                <!--                <p>推广分红</p>-->
                <p>{{ $t("panel.subDesc12") }}</p>
                <p>{{ fromWeiToFloat(platformDailyData.extension_profit) }}</p>
              </div>
            </div>

            <div v-show="platformDailyData.list.length > 1" class="div-chart">
              <Chart :data="platformDailyData.list" />
            </div>

            <div class="div-board">
              <div class="border-orange">
                <!--                <p>累计NFT分红</p>-->
                <p>{{ $t("panel.subDesc13") }}</p>
                <p>{{ fromWeiToFloat(platformNftData.NFT_total_profit) }}</p>
              </div>
              <div class="border-green">
                <!--                <p>昨日NFT分红</p>-->
                <p>{{ $t("panel.subDesc14") }}</p>
                <p>{{ fromWeiToFloat(platformNftData.NFT_before_profit) }}</p>
              </div>
              <div class="border-pink">
                <!--                <p>NFT张数</p>-->
                <p>{{ $t("panel.subDesc15") }}</p>
                <p>{{ platformNftData.NFT_total_num }}</p>
              </div>
              <div class="border-purple">
                <!--                <p>NFT分红比例</p>-->
                <p>{{ $t("panel.subDesc16") }}</p>
                <p>{{ platformNftData.NFT_profit_ratio * 100 }}%</p>
              </div>
            </div>

            <div v-show="platformNftData.list.length > 1" class="div-chart">
              <Chart :data="platformNftData.list" />
            </div>

            <!--    团队        add ---start-->
            <div class="div-board">
              <div class="border-orange">
                <!--   <p>累计动态分红</p>-->
                <p>{{ $t("panel.subDesc20") }}</p>
                <p>{{ platformDynamicData.dynamic_total_profit }}</p>
              </div>
              <div class="border-green">
                <!--   <p>昨日动态分红</p>-->
                <p>{{ $t("panel.subDesc21") }}</p>
                <p>{{ platformDynamicData.dynamic_before_profit }}</p>
              </div>
            </div>
            <div v-show="platformDynamicData.list.length > 1" class="div-chart">
              <Chart :data="platformDynamicData.list" />
            </div>
            <!--            add ---end-->

            <div class="div-board">
              <div class="border-orange">
                <!--                <p>累计销毁</p>-->
                <p>{{ $t("panel.subDesc17") }}</p>
                <p>{{ platformDestroyData.destroy_total_num }}</p>
              </div>
              <div class="border-green">
                <!--                <p>昨日销毁</p>-->
                <p>{{ $t("panel.subDesc18") }}</p>
                <p>{{ platformDestroyData.before_num }}</p>
              </div>
            </div>

            <div v-show="platformDestroyData.list.length > 1" class="div-chart">
              <Chart :data="platformDestroyData.list" />
            </div>
          </div>
          <!--  团队--end        -->

          <div v-show="false" class="div-list-empty">
            <img
              src="./../../assets/icon-revenue-empty.png"
              width="150"
              alt=""
            />
            <p>{{ $t("panel.subDesc19") }}</p>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style scoped lang="less">
@import "./../../styles/mixin.less";
p {
  margin: 0px;
}
.home {
  font-size: 14px;
  color: #ffffff;
  padding-bottom: 20px;
}
.div-wallet {
  height: 44px;
  padding: 0 14px;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  & > div {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .wallet {
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px;
    border: 1px solid #9cb3bf;
  }
}
.div-record {
  padding: 20px 14px;
  position: relative;
  &-title {
    font-weight: 500;
    font-size: 23px;
    color: #e5f0f4;
    line-height: 40px;
    text-indent: 14px;
    position: relative;
    &:before {
      display: block;
      content: "";
      width: 5px;
      height: 23px;
      position: absolute;
      left: 0px;
      top: 8px;
      background-color: #ff6393;
      border-radius: 5px;
    }
  }
  :deep(.van-tabs__wrap) {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  :deep(.van-tabs__nav) {
    font-size: 14px;
    color: #606374;
    background-color: #171826;
  }
  :deep(.van-tab--active) {
    font-weight: normal;
    color: #fff;
    background-color: #0066ff;
  }
  :deep(.van-tabs__line) {
    display: none;
  }
  :deep(.van-tab) {
    flex: none;
    width: 65px;
    height: 32px;
  }
  .div-list-empty {
    padding: 40px 10px;
    background: #27283e;
    border-radius: 20px;
    border: 1px solid #62737f;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p {
      font-size: 16px;
      color: #606374;
    }
  }
  .div-list {
    .div-board {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-bottom: 20px;
      & > div {
        padding: 12px 19px;
        background: #27283e;
        border-radius: 20px;
        border: 1px solid;
        width: calc(50% - 50px);
        & > p:nth-child(1) {
          font-weight: 400;
          font-size: 12px;
          color: #5f707d;
          line-height: 16px;
        }
        & > p:nth-child(2) {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #e5f0f4;
        }
        &.border-orange {
          border-color: #ff8f6e;
        }
        &.border-green {
          border-color: #47ddc2;
        }
        &.border-purple {
          border-color: #c1c8ff;
        }
        &.border-pink {
          border-color: #ff6393;
        }
        &.border-yellow {
          border-color: #ffca63;
        }
        &.border-cyan {
          border-color: #c1ffc8;
        }
      }
    }
  }
}

.div-chart {
  margin-bottom: 10px;
}
</style>
